<template>
	<view>
		<uni-card>
			<uni-row>
				<uni-col span="4">
					<image class="time" src="../../static/bianzu 2.png"></image>
				</uni-col>
				<uni-col span="20">
					<text class="top">预约入园时间</text>
					<view>
						<text class="top1">2024年6月{{ selectedDate }}日 {{ selectedTime }}</text>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<text class="between">主预约人</text>
		<view>
			<uni-card>
				<view class="name"><text class="name1">姓名</text><text class="name2">*</text><text class="name3">:</text>
				</view>
				<input class="yuyue-name" placeholder="请输入预约人姓名" placeholder-style="font-size:14px" v-model="name"
					@input="handleInput($event,1)">
				<view class="number"><text class="number1">证件号码</text><text class="number2">*</text><text
						class="number3">:</text></view>
				<input class="yuyue-number" placeholder="请输入证件号码" placeholder-style="font-size:14px"
					v-model="certificateNumber" @input="handleInput($event,2)">
				<view class="types"><text class="types1">证件类型</text><text class="types2">*</text><text
						class="types3">:</text></view>
				<select class="yuyue-types" ref="mySelect" v-model="query.certificateType">
					<option v-for="option in options" :value="option">{{option}}</option>
				</select>
				<view class="phone"><text class="phone1">手机号码</text><text class="phone2">*</text><text
						class="phone3">:</text></view>
				<input class="yuyue-phone" placeholder="请输入手机号码" placeholder-style="font-size:14px"
					v-model="phoneNumber" @input="handleInput($event,3)">


				<uni-row>
					<uni-col span="1">
						<label class="square">
							<input type="checkbox" v-model="isChecked">
						</label>
					</uni-col>
					<uni-col span="23">
						<view class="little">同行人有6周岁（含）以下货身高1.2米（含）以下儿童，只需选择儿童数。</view>
					</uni-col>
				</uni-row>

				<uni-row>
					<uni-col :span="5" :offset="10">
						<view class="people" :class="{'people-selected': selected === 1}" @click="toggleSelect(1)">1人
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="people" :class="{'people-selected': selected === 2}" @click="toggleSelect(2)">2人
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="people" :class="{'people-selected': selected === 3}" @click="toggleSelect(3)">3人
						</view>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		<div class="page">

			<div v-for="(companion, index) in companions" :key="index">
				<uni-row>
					<uni-col :span="22">
						<view class="fuze">
							<text class="fuze-text">同行人{{ index + 1 }}</text>
						</view>
					</uni-col>
					<uni-col :span="2">
						<view @click="removeCompanion(index)">
							<image src="../../static/shanchu.png" mode="" class="shanchu"></image>
						</view>
					</uni-col>
				</uni-row>


				<view>
					<uni-card>
						<view class="G">
							<text class="G1">姓名</text>
							<text class="G2">*</text>
							<text class="G3">:</text>
						</view>
						<input class="H" placeholder="请输入预约人姓名" v-model="companion.name"
							@input="handleInput($event,4,index)" />
						<view class="types">
							<text class="types1">证件类型</text>
							<text class="types2">*</text>
							<text class="types3">:</text>
						</view>
						<select class="yuyue-types" v-model="companion.certificateType">
							<option v-for="option in options" :key="option" :value="option">{{ option }}</option>
						</select>
						<view class="I">
							<text class="I1">证件号码</text>
							<text class="I2">*</text>
							<text class="I3">:</text>
						</view>
						<input class="J" placeholder="请输入证件号码" v-model="companion.certificateNumber" />
						<view class="K">
							<text class="K1">手机号码</text>
							<text class="K2">*</text>
							<text class="K3">:</text>
						</view>
						<input class="L" placeholder="请输入手机号码" v-model="companion.phoneNumber" />
					</uni-card>
				</view>
			</div>
		</div>
		<div class="card">
			<view class="add" @click="addCompanion">
				<text class="add1">+</text>
				<text class="add2">添加同行人</text>
			</view>
		</div>
		<view class="jinggao">
			<uni-row>
				<uni-col :span="1">
					<image class="O" src="../../static/jinggao.png"></image>
				</uni-col>
				<uni-col :span="20">
					<view class="N"><text class="N1">最多可预约成人4人，儿童3人</text></view>
				</uni-col>
			</uni-row>
		</view>
		<button class="tijiao" @click="goToPersonCredential">
			<text class="tijiao1">提交预约</text>
		</button>
	</view>


</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import data from "../../data/data.json"
	// 定义一个响应式变量来存储选中的值

	const selectedValue = ref('');
	// 下拉框的选项数据
	const options = ref(data.options);
	const selected = ref(1); // 使用ref创建响应式数据
	const mySelect = ref(null)
	const isChecked = ref(false)
	const idNumber = ref('');
	const name = ref('');
	const phone = ref('');

	function toggleSelect(number = 0) {
		query.value.childCount = number;
		selected.value = number;
	}
	const companions = ref([]);

	function handleInput(e, index,  arrayIndex = 0) {
		switch (index) {
			case 1:
				query.value.name = e.detail.value;
				break;
			case 2:
				query.value.certificateNumber = e.detail.value;
				break;
			case 3:
				query.value.phoneNumber = e.detail.value;
				break;
			case 4:
				query.value.companions.at(arrayIndex).name = e.detail.value;
				break;
		}
		console.log(query.value);
	}

	function addCompanion() {
		const newCompanion = {
			name: '',
			certificateType: options.value[0],
			certificateNumber: '',
			phoneNumber: ''
		};
		companions.value.push(newCompanion);
		query.value.companions.push(newCompanion);
	}

	function removeCompanion(index) {
		companions.value.splice(index, 1);
	}
	const query = ref({
		name: '',
		certificateNumber: '',
		certificateType: '',
		phoneNumber: '',
		childCount: '',
		companions: [],
	})

	function goToPersonCredential() {
		query.value.selectedDate = selectedDate.value;
		query.value.selectedTime = selectedTime.value;
		uni.navigateTo({
			url: `/pages/personCredential/personCredential?params=${JSON.stringify(query.value)}`
		});
	}
	const selectedDate = ref('');
	const selectedTime = ref('');

	onLoad((options) => {
		// 确保参数名与传递时的参数名匹配
		selectedDate.value = decodeURIComponent(options.date);
		selectedTime.value = decodeURIComponent(options.time);
	});
</script>
<style scoped>
	.time {
		text-align: left;
		width: 38px;
		height: 38px;
	}

	.top {
		width: 72px;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 14px;
		color: #000000;
		letter-spacing: 0;
	}

	.top1 {
		width: 212px;
		height: 21px;
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-top: 10px;
	}

	.between {
		width: 60px;
		height: 21px;
		font-weight: 600;
		font-size: 15px;
		margin-left: 10px;
	}

	.name {
		.name1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.name2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.name3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.yuyue-name {
		
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.yuyue-number {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.number {
		.number1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.number2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.number3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.phone {
		.phone1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.phone2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.phone3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.yuyue-phone {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.types {
		.types1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.types2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.types3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.yuyue-types {
		width: 319px;
		height: 30px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.square {
		accent-color: #8DCB6D;
	}

	.little {
		margin-left: 8px;
	}

	.yuyue {
		text-align: left;
		margin-left: 15px;
		margin-top: 15px;
	}

	.fuze {
		margin-left: 15px;
	}

	.shanchu {
		width: 16px;
		height: 16px;
	}

	.yuyue-text {
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}

	.types {
		.types1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.types2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.types3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.yuyue-types {
		width: 329px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	/* 	.time{
		text-align: center;
		position: relative;
		top:-10px;
	} */
	.time-text {
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}

	.top {
		text-align: center;
		/* height: 85px; */
	}

	.top-text {
		opacity: 0.9;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 20px;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		line-height: 85px;
	}

	/* .A{
	    text-align: center;
	} */
	.A-text {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
	}

	.B {
		.B1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.B2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.B3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.D {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
		font-weight: 400;
		font-size: 15px;
	}

	.E {
		.E1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.E2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.E3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.F {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
		font-weight: 400;
		font-size: 14px;
	}

	.G {
		.G1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.G2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.G3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.H {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.I {
		.I1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.I2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.I3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.J {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.K {
		.K1 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.K2 {
			color: #e8240f;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}

		.K3 {
			color: #05261b;
			font-size: 15px;
			font-face: PingFangSC;
			font-weight: 400;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			text-align: left;
		}
	}

	.L {
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin: 6px 0;
		padding-left: 12px;
	}

	.card {
		border: 1px dashed green;
		padding: 20px;
		margin: 15px;
		border-radius: 5px;
		background: #FFFFFF;
	}

	.add {
		text-align: center;

		.add1 {
			width: 16px;
			height: 16px;
			font-weight: 600;
		}

		.add2 {
			width: 75px;
			height: 21px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 15px;
			color: #323232;
			letter-spacing: 0;
		}
	}

	.jinggao {
		margin-left: 15px;
	}

	.N {
		width: 159px;
		height: 17px;
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		letter-spacing: 0;

	}

	.tijiao {

		margin: 15px;

		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
	}

	.tijiao1 {
		width: 68px;
		height: 24px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}

	.O {
		width: 13.12px;
		height: 13.12px;

	}


	.people {
		margin-top: 15px;
		width: 52px;
		height: 24px;
		background: #F4F4F4;
		border: 1px solid #BEC3BC;
		border-radius: 14px;
		text-align: center;
	}

	.people-selected {
		background: #F1FAEC;
		border: 1px solid #8DCB6D;
	}
</style>